/** 
 * for html and print
 */
html body[for='html-export'] {
  .apply-light-by-vs-style();
}

/**
 * for preview
 */
html body:not([for='html-export']) {
  .apply-dark-by-monokai-style();
}

/**
 * VS theme by Andrew Lock (https://andrewlock.net)
 * Inspired by Visual Studio syntax coloring
 */
.apply-light-by-vs-style() {
  code[class*='language-'],
  pre[class*='language-'] {
    color: #393a34;
    font-family: 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier,
      monospace;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    font-size: 0.95em;
    line-height: 1.2em;

    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
  }

  pre[class*='language-']::-moz-selection,
  pre[class*='language-'] ::-moz-selection,
  code[class*='language-']::-moz-selection,
  code[class*='language-'] ::-moz-selection {
    background: #c1def1;
  }

  pre[class*='language-']::selection,
  pre[class*='language-'] ::selection,
  code[class*='language-']::selection,
  code[class*='language-'] ::selection {
    background: #c1def1;
  }

  /* Code blocks */
  pre[class*='language-'] {
    padding: 1em;
    margin: 0.5em 0;
    overflow: auto;
    border: 1px solid #dddddd;
    background-color: #f8f8f8;
  }

  /* Inline code */
  :not(pre) > code[class*='language-'] {
    padding: 0.2em;
    padding-top: 1px;
    padding-bottom: 1px;
    background: #f8f8f8;
    border: 1px solid #dddddd;
  }

  .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata {
    color: #008000;
    font-style: italic;
  }

  .token.namespace {
    opacity: 0.7;
  }

  .token.string {
    color: #a31515;
  }

  .token.punctuation,
  .token.operator {
    color: #393a34;
    /* no highlight */
  }

  .token.url,
  .token.symbol,
  .token.number,
  .token.boolean,
  .token.variable,
  .token.constant,
  .token.inserted {
    color: #36acaa;
  }

  .token.atrule,
  .token.keyword,
  .token.attr-value,
  .language-autohotkey .token.selector,
  .language-json .token.boolean,
  .language-json .token.number,
  code[class*='language-css'] {
    color: #0000ff;
  }

  .token.function {
    color: #393a34;
  }

  .token.deleted,
  .language-autohotkey .token.tag {
    color: #9a050f;
  }

  .token.selector,
  .language-autohotkey .token.keyword {
    color: #00009f;
  }

  .token.important,
  .token.bold {
    font-weight: bold;
  }

  .token.italic {
    font-style: italic;
  }

  .token.class-name,
  .language-json .token.property {
    color: #2b91af;
  }

  .token.tag,
  .token.selector {
    color: #800000;
  }

  .token.attr-name,
  .token.property,
  .token.regex,
  .token.entity {
    color: #ff0000;
  }

  .token.directive.tag .tag {
    background: #ffff00;
    color: #393a34;
  }

  /* overrides color-values for the Line Numbers plugin
 * http://prismjs.com/plugins/line-numbers/
 */
  .line-numbers .line-numbers-rows {
    border-right-color: #a5a5a5;
  }

  .line-numbers-rows > span:before {
    color: #2b91af;
  }

  /* overrides color-values for the Line Highlight plugin
* http://prismjs.com/plugins/line-highlight/
*/
  .line-highlight {
    background: rgba(193, 222, 241, 0.2);
    background: -webkit-linear-gradient(
      left,
      rgba(193, 222, 241, 0.2) 70%,
      rgba(221, 222, 241, 0)
    );
    background: linear-gradient(
      to right,
      rgba(193, 222, 241, 0.2) 70%,
      rgba(221, 222, 241, 0)
    );
  }

  /* highlight */
  pre[data-line] {
    position: relative;
    padding: 1em 0 1em 3em;
  }

  pre[data-line] .line-highlight-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    display: block;
    width: 100%;
  }

  pre[data-line] .line-highlight {
    position: absolute;
    left: 0;
    right: 0;
    padding: inherit 0;
    margin-top: 1em;
    background: hsla(24, 20%, 50%, 0.08);
    background: linear-gradient(
      to right,
      hsla(24, 20%, 50%, 0.1) 70%,
      hsla(24, 20%, 50%, 0)
    );
    pointer-events: none;
    line-height: inherit;
    white-space: pre;
  }

  pre[data-line] .line-highlight:before,
  pre[data-line] .line-highlight[data-end]:after {
    content: attr(data-start);
    position: absolute;
    top: 0.4em;
    left: 0.6em;
    min-width: 1em;
    padding: 0 0.5em;
    background-color: hsla(24, 20%, 50%, 0.4);
    color: hsl(24, 20%, 95%);
    font: bold 65%/1.5 sans-serif;
    text-align: center;
    vertical-align: 0.3em;
    border-radius: 999px;
    text-shadow: none;
    box-shadow: 0 1px white;
  }

  pre[data-line] .line-highlight[data-end]:after {
    content: attr(data-end);
    top: auto;
    bottom: 0.4em;
  }
}

/**
 * Modified according to:
 * https://github.com/kevinsawicki/monokai
 * These colors are specific to the theme. Do not use in a package!
 */
.apply-dark-by-monokai-style() {
  @ghost-white: #f8f8f0;
  @light-ghost-white: #f8f8f2;
  @light-gray: #ccc;
  @gray: #888;
  @brown-gray: #49483e;
  @dark-gray: #282828;

  @yellow: #e6db74;
  @blue: #66d9ef;
  @pink: #f92672;
  @purple: #ae81ff;
  @brown: #75715e;
  @orange: #fd971f;
  @light-orange: #ffd569;
  @green: #a6e22e;
  @sea-green: #529b2f;

  // General colors
  @syntax-text-color: @light-ghost-white;
  @syntax-cursor-color: @ghost-white;
  @syntax-selection-color: @brown-gray;
  @syntax-background-color: @dark-gray;

  // Guide colors
  @syntax-wrap-guide-color: rgba(255, 255, 255, 0.1);
  @syntax-indent-guide-color: rgba(255, 255, 255, 0.15);
  @syntax-invisible-character-color: rgba(197, 200, 198, 0.2);

  // For find and replace markers
  @syntax-result-marker-color: @gray;
  @syntax-result-marker-color-selected: white;

  // Gutter colors
  @syntax-gutter-text-color: @syntax-text-color;
  @syntax-gutter-text-color-selected: @syntax-gutter-text-color;
  @syntax-gutter-background-color: lighten(@syntax-background-color, 3%);
  @syntax-gutter-background-color-selected: @syntax-selection-color;

  // For git diff info. i.e. in the gutter
  @syntax-color-renamed: @light-orange;
  @syntax-color-added: @sea-green;
  @syntax-color-modified: @yellow;
  @syntax-color-removed: @pink;

  pre {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;

    // padding: 16px;
    padding: 1em;
    margin: 0.5em 0;

    overflow: auto;
    line-height: 1.5;
    tab-size: 4;
    hyphens: none;
    color: @syntax-text-color;
    background-color: contrast(
      @syntax-background-color,
      lighten(@syntax-background-color, 4%),
      darken(@syntax-background-color, 6%)
    ) !important;
    border: contrast(
      @syntax-background-color,
      lighten(@syntax-background-color, 16%),
      darken(@syntax-background-color, 16%)
    );
    border-radius: 3px;
  }

  pre[class*='language-'] {
    // presentation mode padding
    padding: 1em;
  }

  code[class*='language-'],
  pre[class*='language-'] {
    .token.comment,
    .token.prolog,
    .token.doctype,
    .token.cdata {
      color: @brown;
    }

    .token.punctuation {
      // color: #999;
      color: inherit;
    }

    .namespace {
      opacity: 0.7;
    }

    .token.property,
    .token.tag,
    .token.boolean,
    .token.number,
    .token.function-name,
    .token.constant,
    .token.symbol,
    .token.deleted {
      color: @purple;
    }

    .token.selector,
    .token.attr-name,
    .token.string,
    .token.char,
    .token.builtin,
    .token.inserted {
      color: @yellow;
    }

    .token.entity {
      color: @purple;
    }

    .token.url {
      color: @light-gray;
    }

    .token.operator {
      color: @pink;
    }

    .token.atrule,
    .token.attr-value,
    .token.keyword {
      // color: @pink !important;
      color: @blue;
    }

    .token.function {
      color: @green;
    }

    .token.class-name {
      color: @green;
    }

    .token.regex {
      color: @purple;
    }

    .token.important,
    .token.variable {
      color: @green;
    }

    .token.important,
    .token.bold {
      font-weight: bold;
    }

    .token.italic {
      font-style: italic;
    }

    .token.entity {
      cursor: help;
    }
  }

  /* highlight */
  pre[data-line] {
    position: relative;
    padding: 1em 0 1em 3em;
  }

  pre[data-line] .line-highlight-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    display: block;
    width: 100%;
  }

  pre[data-line] .line-highlight {
    position: absolute;
    left: 0;
    right: 0;
    padding: inherit 0;
    margin-top: 1em;
    background: hsla(24, 20%, 50%, 0.08);
    background: linear-gradient(
      to right,
      hsla(24, 20%, 50%, 0.1) 70%,
      hsla(24, 20%, 50%, 0)
    );
    pointer-events: none;
    line-height: inherit;
    white-space: pre;
  }

  pre[data-line] .line-highlight:before,
  pre[data-line] .line-highlight[data-end]:after {
    content: attr(data-start);
    position: absolute;
    top: 0.4em;
    left: 0.6em;
    min-width: 1em;
    padding: 0 0.5em;
    background-color: hsla(24, 20%, 50%, 0.4);
    color: hsl(24, 20%, 95%);
    font: bold 65%/1.5 sans-serif;
    text-align: center;
    vertical-align: 0.3em;
    border-radius: 999px;
    text-shadow: none;
    box-shadow: 0 1px white;
  }

  pre[data-line] .line-highlight[data-end]:after {
    content: attr(data-end);
    top: auto;
    bottom: 0.4em;
  }
}
